<nz-page-header class="site-page-header">
  <nz-page-header-title>{{roleName}}</nz-page-header-title>
  <nz-page-header-subtitle>{{roleId}}</nz-page-header-subtitle>
  <nz-page-header-extra>
    <button nz-button nzType="primary" (click)="search()">查询</button>
  </nz-page-header-extra>
</nz-page-header>
<form nz-form [formGroup]="searchForm">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>用户名</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="用户名" [formControlName]="'userName'"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>账号</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="账号" [formControlName]="'userAccount'"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>是否可用</nz-form-label>
        <nz-form-control>
          <nz-select [formControlName]="'enable'">
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option nzValue="1" nzLabel="是"></nz-option>
            <nz-option nzValue="2" nzLabel="否"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>是否已经包含</nz-form-label>
        <nz-form-control>
          <nz-select [formControlName]="'isInclude'">
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option nzValue="1" nzLabel="是"></nz-option>
            <nz-option nzValue="2" nzLabel="否"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

    </div>
  </div>
</form>
<div class="table-div" >
  <nz-table #smallTable [nzData]="users" nzSize="small" [nzFrontPagination]="false" nzShowSizeChanger
            [nzShowTotal]="totalTemplate"
            [nzTotal]="count" [(nzPageIndex)]="current" [(nzPageSize)]="pageSize" [nzShowPagination]="true"
            [nzLoading]="loading" [nzLoadingDelay]="300"
            (nzPageIndexChange)="search()" (nzPageSizeChange)="search()" [nzPageSizeOptions]="pageSizes"
            nzShowQuickJumper [nzScroll]="{ y: 'calc(100vh - 385px)'}">
    <thead>
    <tr>
      <th>名字</th>
      <th>账号</th>
      <th>是否可用</th>
      <th>是否已有</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of smallTable.data">
      <td>{{ data.userName }}</td>
      <td>{{ data.userAccount }}</td>
      <td>{{ data.enable | enablePipe  }}</td>
      <td>{{ data.isInclude | enablePipe }}</td>
      <td>
        <button nz-button nzType="link" nzSize="small" *ngIf="data.isInclude == '1'"
                [nzPopconfirmTitle]="'Are you sure delete this user:'+data.userName+' ?'" nz-popconfirm
                (nzOnConfirm)="delete(data.userId)">
          <i nz-icon nzType="delete" nzTheme="outline"></i>delete
        </button>
        <button nz-button nzType="link" nzSize="small" *ngIf="data.isInclude == '2'" (click)="add(data.userId)">
          <i nz-icon nzType="user-add" nzTheme="outline"></i>add
        </button>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 一共 {{ total }} 条数据</ng-template>
</div>




